<template>
  <div class="box">
    <div class="header">
      <!-- <van-icon class="arrows" name="arrow-left" /> -->
      <van-nav-bar left-arrow @click-left="onClickLeft" />
    </div>
    <div class="main">
      <div class="a">
        <div class="cabinet">
          <div><img src="" alt="" /></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <p class="quanbu">全部商品></p>
        <div class="nav">
          <div class="navUp">
            <div class="upLeft">
              <div>
                <div class="rule"></div>
                <span>玩法规则</span>
              </div>
              <div>
                <div class="rule"></div>
                <span>玩法规则</span>
              </div>
              <div>
                <div class="rule"></div>
                <span>玩法规则</span>
              </div>
              <span>720已开盒</span>
            </div>
            <div class="upRight"></div>
          </div>
          <div class="navDown">
            <p>Apple盒子</p>
            <p>79.00</p>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p class="textBox">苹果全家桶来袭！<br />新款iPad大小事同时搞定</p>
      <div class="btn">
        <button class="btnLeft">
          <p>79.00 | 一发入魂</p>
        </button>
        <button class="btnRight" @click="flag = !flag">
          <popupBox v-model:show="flag"></popupBox>
          <p>355.50 | 五连绝世</p>
          <span style="text-decoration: line-through">原价：395.00</span>
        </button>
      </div>
    </div>
  </div>
</template>
<script>
import popupBox from "@/components/popupBox";
export default {
  data() {
    return {
      flag: false,
    };
  },
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },

  components: {
    popupBox,
  },
};
</script>
<style scoped>
.box {
  height: 667.2px;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}
.arrows {
  width: 24px;
  height: 24px;
  color: rgba(25, 138, 250, 100);
  margin-left: 9px;
}
.main {
  flex: 1;
}
.a {
  margin: 0 12px;
}
.cabinet {
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 100);
}
.cabinet > div {
  width: 82px;
  height: 82px;
  border-radius: 6px;
  background-color: rgba(206, 206, 206, 100);
}
.quanbu {
  width: 100%;
  height: 25px;
  line-height: 25px;
  color: rgba(16, 16, 16, 100);
  font-size: 12px;
  text-align: center;
  font-family: Arial;
}
.nav {
  padding: 0 12px 0 9px;
  background-color: rgba(239, 239, 239, 100);
}
.navUp {
  display: flex;
}

.upLeft > div {
  margin-bottom: 12px;
}

.rule {
  width: 55px;
  height: 55px;
  background-color: rgba(154, 154, 154, 100);
  border-radius: 50%;
}
.upLeft span {
  color: rgba(16, 16, 16, 100);
  font-size: 12px;
  font-family: SourceHanSansSC-regular;
  text-align: center;
  background-color: #fff;
}
.upLeft span:nth-child(1) {
  margin: 0 0 6px 2px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  font-family: PingFangSC-regular;
}
.navDown {
  height: 94px;
  width: 100%;
  border-top: 1px solid rgba(187, 187, 187, 100);
  border-bottom: 1px solid rgba(187, 187, 187, 100);
}
.navDown p:nth-child(1) {
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  font-family: SourceHanSansSC-regular;
  text-align: center;
  margin: 8px 0 14px 0;
}
.navDown p:nth-child(2) {
  color: rgba(16, 16, 16, 100);
  font-size: 24px;
  text-align: center;
  font-family: SourceHanSansSC-regular;
}
.footer {
  width: 100%;
  padding: 14px 12px 12px 12px;
}
.textBox {
  width: 177px;
  height: 39px;
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  margin-bottom: 8px;
}
.btn {
  display: flex;
  justify-content: space-between;
}
.btnLeft {
  width: 168px;
  height: 51px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(51, 51, 51, 100);
  text-align: center;
}
.btnRight {
  width: 168px;
  height: 51px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(190, 190, 190, 100);
}
.btnLeft p {
  color: rgba(190, 190, 190, 100);
  font-size: 14px;
  font-family: SourceHanSansSC-light;
}
.btnRight p {
  color: rgba(51, 51, 51, 100);
  font-size: 14px;
  font-family: SourceHanSansSC-regular;
}
.btnRight span {
  color: rgba(154, 154, 154, 100);
  font-size: 14px;
  font-family: SourceHanSansSC-regular;
}
.btn button {
  border-style: none;
}
</style>
